<section class="users">

  <groups class="col-md-4 groups aside" groups="users.groups" active-promise="users.activePromise"></groups>

  <div class="col-md-8">

    <input type="text" class="filter-table form-control pull-right" ng-model="users.q" placeholder="{{'group.filter_users' | translate}}"></input>
    <i class="glyphicon glyphicon-remove-sign filter-table-reset" ng-show="users.q != ''" ng-click="users.q = ''"></i>
    <h3 ng-if="!users.activeGroup" class="groups-title">{{users.users.length}} <span translate>group.users</span></h3>
    <h3 ng-if="users.activeGroup" class="groups-title">
      {{users.activeGroup.cn}}
      <button class="btn btn-default btn-xs delete" title="{{ 'group.delete' | translate }}"
        ng-click="users.deleteGroup()" ng-show="users.canDelete">
        <i class="glyphicon glyphicon-trash"></i>
      </button>
    </h3>
    <p ng-if="users.activeGroup">
      <em class="content-description" contenteditable="true" ng-init="users.initEditable()">{{users.activeGroup.description}}</em>
    </p>

    <table class="table table-striped table-condensed">

      <thead>
        <tr>
          <th translate>users.user</th>
          <th translate>users.login</th>
          <th translate>users.organization</th>
          <th translate>users.email</th>
        </tr>
      </thead>

      <tbody>
        <tr dir-paginate="user in users.users | filter:users.q | itemsPerPage: users.itemsPerPage">
          <td>
            <a ng-link="user({id: user.uid, tab: 'infos'})">{{::user.sn}} {{::user.givenName}}</a>
          </td>
          <td>{{::user.uid}}</td>
          <td>{{::user.org}}</td>
          <td>{{::user.mail}}</td>
        </tr>
      </tbody>

    </table>

    <dir-pagination-controls></dir-pagination-controls>

  </div>

  <div ng-if="users.newGroup" class="background" ng-cloack>

    <div class="panel panel-default">

      <div class="panel-heading">
        <a class="btn close" ng-click="users.close()">&times;</a>
        <span translate>users.createGroup</span>
      </div>
      <div class="panel-body">
        <form class="form-horizontal" name="groupForm">

          <div class="form-group" ng-class="{'has-error': groupForm.newGroupName.$invalid && groupForm.newGroupName.$dirty}">
            <label for="newGroupName" class="col-sm-4 control-label" translate>users.newGroup</label>
            <div class="col-sm-8">
              <input ng-model="users.newGroupName" id="newGroupName" class="form-control" name="newGroupName"
                placeholder="{{ 'users.newGroupName' | translate}}" validate-group="users.groups"/>
            </div>
          </div>
          <div class="form-group">
            <label for="newGroupDesc" class="col-sm-4 control-label" translate>users.newGroupDesc</label>
            <div class="col-sm-8">
              <textarea ng-model="users.newGroupDesc" id="newGroupDesc" class="form-control" Desc="newGroupDesc"></textarea>
            </div>
          </div>

          <hr>

          <button class="btn btn-primary pull-right" ng-disabled="groupForm.$invalid" ng-click="users.saveGroup()">
            <span translate>users.save</span>
          </button>
          <button class="btn btn-link pull-right" ng-click="users.close()" translate>users.cancel</button>
        </form>
      </div>

    </div>

  </div>

  <div ng-if="users.delete" class="background" ng-cloack>

    <div class="panel panel-default">

      <div class="panel-heading">
        <a class="btn close" ng-click="users.close()">&times;</a>
        <span translate>users.confirm</span>
      </div>
      <div class="panel-body">
        <p>
          <span translate>users.confirmText</span>
          «<em>{{users.activeGroup.cn}}</em>» ?
        </p>
        <hr>
        <button class="btn btn-primary pull-right" ng-click="users.confirmDeleteGroup()">
          <span translate>users.delete</span>
        </button>
        <button class="btn btn-link pull-right" ng-click="users.close()" translate>users.cancel</button>
      </div>

    </div>

  </div>

</section>
